<template>
  <div id="product-group">
    <div class="col-sm-6 product-container left">
      <product title="添加产品" :goods-list="unSelectedGoodsList" type="1" @selected-goods="setSelectedGoodsList"></product>
    </div>
    <div class="col-sm-6 product-container right" v-show="showSelected">
      <product title="已选产品" :goods-list="selectedGoodsList" type="2" @unselected-goods="setUnselectedGoodsList"></product>
    </div>
  </div>
</template>

<script>
// 商品组件
import product from './product'

// 获取方法
import { inArray } from '../../../common/util'

export default {
  components: {
    product
  },
  props: {
    max: {
      type: [Number, String],
      default: 10000000
    },
    // 待选商品
    goods: {
      type: Array,
      default: () => { return [] }
    },
    // 已选中的商品
    products: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      // 展示已选商品列表
      showSelected: false,
      // 未选商品
      unSelectedGoodsList: this.goods,
      // 已选商品
      selectedGoodsList: []
    }
  },
  watch: {
    goods() {
      this.unSelectedGoodsList = this.goods
      // 设置所有的商品都是未选中的
      this.unSelectedGoodsList.forEach((v) => {
        this.$set(v, 'isSelected', false)
      })
    }
  },
  mounted() {
    // 如果已选商品列表不存在，则抛出
    if (!this.products || this.products.length == 0) {
      return
    }
    // 设置已选商品
    this.selectedGoodsList = this.products
    // 设置所有的商品都是未选中的
    this.selectedGoodsList.forEach((v) => {
      this.$set(v, 'isSelected', false)
    })
    // 展示已选商品列
    this.showSelected = true
  },
  methods: {
    /**
     * 将待选商品选中的商品发送给已选商品列表
     *
     * @param {[type]} goodsList 已经选中的商品列表
     */
    setSelectedGoodsList(goodsList) {
      // 如果商品选择超过最大值
      if ((goodsList.length + this.selectedGoodsList.length) > this.max) {
        this.$toast('您选择的商品超过最大设置')
        return
      }

      // 将已选中的数据和之前的数据合并
      this.selectedGoodsList = this.selectedGoodsList.concat(goodsList)
      // 去重
      if (this.selectedGoodsList && this.selectedGoodsList.length) {
        var result = [this.selectedGoodsList[0]]
        for (var i = 1; i < this.selectedGoodsList.length; i++) {
          var item = this.selectedGoodsList[i]
          var repeat = false
          for (var j = 0; j < result.length; j++) {
            if (item.id == result[j].id) {
              repeat = true
              break
            }
          }
          if (!repeat) {
            result.push(item)
          }
        }
      }
      this.selectedGoodsList = result

      // 去除并集
      this.unSelectedGoodsList = this.unSelectedGoodsList.filter((v) => {
        return !inArray(goodsList, v)
      })

      // 将选中的数据发送给上级
      this.emitGoodsIds()

      // 展示已选商品列表
      this.showSelected = true
    },

    /**
     * 向上级发送已经选择的商品id
     */
    emitGoodsIds() {
      // 商品id集合
      let ids = []
      // 遍历数据
      this.selectedGoodsList.forEach((v) => {
        ids.push(v.goodsId || v.id)
      })

      // 向上级发送请求
      this.$emit('input', ids.join(','))
    },
    /**
     * 处理在未选清单中点击删除的商品列表
     *
     * @param {[type]} goodsList 已经选中的商品列表
     */
    setUnselectedGoodsList(goodsList) {
      // 合并未选中的数据
      this.unSelectedGoodsList = this.unSelectedGoodsList.concat(this.selectedGoodsList.filter((v) => {
        // 不展示复选框选中按钮
        v.isSelected = false
        return !inArray(goodsList, v)
      }))
      // 展示已选列表
      this.selectedGoodsList = goodsList
      // 将选中的数据发送给上级
      this.emitGoodsIds()
      this.$emit('on-search') // 若取消商品，则再次查询时，查询所有搜索条件下的商品
    }
  }
}
</script>

<style lang="scss" scoped>
.product-container {
  display: inline-block;

  &.left {
    padding-right: 12px;
  }

  &.right {
    padding-left: 12px;
  }

  &.mr26 {
    margin-right: 26px;
  }
}
</style>